// out: ../css/
@import './base.less'; 

@mainColor: #ff5588;
@ratio: 3.75; 

.header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: (84vw / @ratio);
    z-index: 1;
    background-color: #fff;
    .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: (44vw / @ratio);
            padding: 0 (12vw / @ratio) 0 (18vw / @ratio);
            background-color: p;
    
            // left
            .left {
                .Navbar_logo {
                    font-size: (28vw / @ratio);
                    color: @mainColor;
                }
            }
        .right {
            display: flex;
            align-items: center;
            .ic_search_tab {
                font-size: (22vw / @ratio);
                color: #ccc;
            }
            .login {
                width: (24vw / @ratio);
                height: (24vw / @ratio);
                margin-left: (24vw / @ratio);
                // font-size: (9vw / @ratio);
                // background-color: #eee;
                // color: @mainColor;
                // text-align: center;
                // padding-top: (5vw / @ratio);
                .txiang {
                    border-radius: (12vw / @ratio);
                }
            }
             .download {
                       display: flex;
                       width: (72vw / @ratio);
                       height: (24vw / @ratio);
                       margin-left: (24vw/ @ratio);
                       font-size: (12vw / @ratio);
                       background-color: #ff5588;
                       color: #fff;
                       border-radius: (4vw / @ratio);
                       text-align: center;
                       justify-content: center; 
                       padding-top: (3vw / @ratio);            
              }
        }    
    }
    // 导航栏
        .menu {
            position: relative;
            height: (39vw / @ratio);
            padding-right: (40vw / @ratio);
            border-bottom: 1px solid #eee;
            overflow: hidden;
    
            .tab {
                ul {
                    display: flex;
    
                    li {
                        padding: 0 (13vw / @ratio);
                        // width: (40vw / @ratio);
    
                        a {
                            display: block;
                            height: (38vw / @ratio);
                            line-height: (38vw / @ratio);
                            font-size: (14vw / @ratio);
                            border-bottom: 2px solid transparent;
    
                        }
    
                        &.active {
                            a {
                                color: @mainColor;
                                border-bottom-color: @mainColor;
                            }
                        }
                    }
                }
            }
    
            .more {
                position: absolute;
                right: 0;
                top: 0;
                width: (40vw / @ratio);
                height: (40vw / @ratio);
                // background-color: pink;
                text-align: center;
                line-height: (40vw / @ratio);
                color: #ccc;
    
                i {
                    font-size: (20vw / @ratio);
                }
            }
        }
}

// 打开按钮
.btn {
    position: fixed;
    left: 0;
    bottom: (38vw / @ratio);
    width: 100%;
    height: (36vw / @ratio);
    padding: (12vw / @ratio);

    a {
        display: block;
        height: (37vw / @ratio);
        background-color: @mainColor;
        border-radius: (19vw / @ratio);
        text-align: center;
        line-height: (36vw / @ratio);
        color: #fff;
        box-shadow: 0 0 (12vw / @ratio) rgba(0, 0, 0, 0.2);

        span {
            font-size: (14vw / @ratio);
        }
    }
}

.main {
    padding: (84vw / @ratio) (5vw/@ratio) 0;

    .video-list {
        display: flex;
        flex-wrap: wrap;
        font-size: (12vw / @ratio);

        .video-item {
            width: 50%;
            padding: (8vw / @ratio) (5vw / @ratio);

            .card {
                position: relative;

                .count {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    padding: (8vw / @ratio);
                    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
                    color: #fff;

                    i {
                        vertical-align: middle;
                    }
                }
            }

            .title {
                margin-top: (6vw / @ratio);
            }
        }
    }
}

.bottom {
    height: (40vw / @ratio);
    text-align: center;
    color: #9499a0;
    font-size: (15vw / @ratio);
}

.buttom {
   height: (120vw / @ratio);
   background-color: #f4f4f4;
   padding-top: (15vw / @ratio); 
   .btext {
    color: #9499a0;
    font-size: (12vw / @ratio);
    text-align: center;
    line-height: (24vw / @ratio);
   }
}